<template>
    <div class="">
        <div class="mask" id="mask" v-if="getStatus" @click="hideMask" ></div>
        <div class="confirm" v-if="getStatus">
            <div class="confirm-content">
                <div class="way-list">
                    <div>
                        <p style="color:#353535; margin-bottom:5px;">到期后自动买入下一期</p>
                        <p style="color:#888888;font-size:14px;"> 到期后本金及收益自动买入下一期，到期前1天 可修改。若无下一期，自动取出到余额。</p>
                    </div>
                    <div style="width:70px; text-align:center;line-height: 70px;">
                        <input type="checkbox" id="check" v-model="checkbox" />
                    </div>
                </div>
                <div class="way-list">
                    <div>
                        <p style="color:#353535; margin-bottom:5px;">到期后自动买入下一期</p>
                        <p style="color:#888888;font-size:14px;"> 到期后本金及收益自动买入下一期，到期前1天 可修改。若无下一期，自动取出到余额。</p>
                    </div>
                    <div style="width:70px; text-align:center;line-height: 70px;">
                        <input type="checkbox" id="check" v-model="checkbox" />
                    </div>
                </div>
            </div>
            <div class="ok" @click="ok">确定</div>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
    data(){
        return {
            isShowShow:this.getStatus,
            checkbox:false
        }
    },
    computed:{
         ...mapState([
            "pageInfo", //页面初始化数据
        ]),
        getStatus(){
            this.isShowShow = this.pageInfo.showpop;
            return this.pageInfo.showpop
        }
    },
    methods:{
        ...mapMutations([
            "SHOWPOP",
            "HIDEPOP"
        ]),
        hideMask(){
            this.$emit('canle')
            // this.HIDEPOP();
        },
        ok(){
            this.$emit('ok')
            this.HIDEPOP();
        }
    },
    mounted(){
        
    },
    created(){
        this.isShowShow = this.pageInfo.showpop;
        
    },
     watch: {
        isShowShow(newVal, oldVal) {
            if (newVal) {
                let cssStr = "overflow-y: hidden; height: 100%;";
                document.getElementsByTagName('html')[0].style.cssText = cssStr;
                document.body.style.cssText = cssStr;
                document.getElementById("app").style.cssText = cssStr;
                var shield=document.getElementById("mask");
                shield.addEventListener("touchstart",function(e){
                    e.stopPropagation();
                    // e.preventDefault();
                },false);
            } else {
                let cssStr = "overflow-y: auto; height: auto;";
                document.getElementsByTagName('html')[0].style.cssText = cssStr;
                document.body.style.cssText = cssStr;
            }

            // 下面需要这两行代码，兼容不同浏览器
            document.body.scrollTop = this.pageScrollYoffset;
            window.scroll(0, this.pageScrollYoffset);

        }
  }
}
</script>

<style scoped>
.mask{
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #575757;
    opacity: 0.5332;
    z-index: 2000;
}
.confirm{
    background:rgba(255,255,255,1);
    z-index: 2001;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;;
    /* margin: auto; */
    /* padding: 21px; */
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    /* transform: translate(-50%);
    transform: translateY(-50%); */
}
.confirm-content{
    padding: 0 0 0 12px;
    background: #fff;
    
}
.way-list{
    height: 95px;
    border-bottom: 1px solid #D8D8D8;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}
.way-list:last-child{
    border: none;
    /* line-height: 70px; */
}
.way-list div{
    padding-top: 16px;
}
.ok{
 width: 100%;
 height: 49px;
 background: #F7A95C;
 text-align: center;
 line-height: 49px;
 color: #fff;
}
.way-list input {
    width: 14px;
    height: 14px;
    position: relative;
    top: 2px;
}

.way-list input[type=checkbox]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    color: white;
    font-size: 16px;
    background: #f2f2f2;
    border: 1px solid #979797;
    border-radius: 4px;
}

.way-list input[type=checkbox]:checked::before {
    color: white;
    background: #f2f2f2;
     border: 1px solid #F7A95C;
    background-image: url("/static/img/dui.png");
    background-position: -1px -3px;
    position: absolute;
}
</style>
